<template>
	
		<view class="demo">
			<view class="demo_tops">
				<view class="demos_zuo" @click="returns">
					<span class="icon-return"></span>
				</view>
					<p style="height: 5vw;font-size: 4vw;line-height: 10vw;margin-left: 30vw;">设置</p>
			</view>
			<view class="tops">
				<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">头像</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
				</view>
				<view class="tops_right">
					<view class="touxiang">
						<img src="" style="width: 100%;height: 100%;overflow: hidden;" alt="" />
					</view>
				</view>
			</view>
			<view class="topse" @click="names">
				<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">昵称</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
				</view>
				<view class="tops_right">
					
						<p style="font-size: 7vw;color: #ccc;line-height: 13vw;width: 8vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><span style="font-size: 4vw;color: #ccc;">{{nickname}}</span> </p>
					
				</view>
			</view>
			<view class="topse" @click="real">
				<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">账号及安全</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
				</view>
				<view class="tops_right">
					
						<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
					
				</view>
			</view>
					<view class="tops">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">通用设置</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						<view class="tops_right">
							<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
						</view>
					</view>
					<view class="topse">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">隐私设置</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						<view class="tops_right">
							
								<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
							
						</view>
					</view>
					<view class="tops">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">支付设置</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						<view class="tops_right">
							
								<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
							
						</view>
					</view>
					<view class="topse">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">Steam账号管理</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						<view class="tops_right">
							
								<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
							
						</view>
					</view>
					<view class="tops">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">应用版本</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						<view class="tops_right">
							
								<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
							
						</view>
					</view>
					<view class="tops">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">关于我们</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						<view class="tops_right">
							
								<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
							
						</view>
					</view>
					<view class="topse">
						<view class="tops_left">
						<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">检查更新</h3>
						<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
						</view>
						
							
								<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>
							
						
					</view>
					<view class="topse" style="margin-top: 4vw;background-color:#f6f9fc ;">
						<button @click="backs" style="width: 100%;height: 10vw;line-height: 10vw;font-size: 4vw;background-color: #ffffff;border: none;">
							退出登录
						</button>
					</view>

		</view>
	
</template>

<script>
	export default {
		data() {
			return {
			nickname:'',
			fuhao:'>'
			}
		},
		onShow() {
			let nickname=uni.getStorageSync("datausers").nickname
			this.nickname=nickname
		},
		methods: {
			returns(){
			uni.navigateBack()
			},
			backs(){
				uni.clearStorage()
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			real(){
				// let 
				uni.navigateTo({
					url:"/pages/My/safe/safe"
				})
			},
			names(){
				uni.navigateTo({
					url:"/pages/My/name/name"
				})
			}
		}
	}
</script>
<style type="text/css">
	@import url("../../../static/icon2/style.css");
</style>
<style>
	.demo{
			width: 100vw;
			height: 100vh;
			background-color: #f6f9fc;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: scroll;
			
		}
		.top{
			width: 100%;
			height: 15vw;
			/* margin-top: 5vw; */
			background-color: #ffffff;
			/* border-radius: 2vw; */
			border-bottom: 1px solid #edecec;
			display: flex;
		}
		.tops{
			width: 100%;
			height: 15vw;
			margin-top: 5vw;
			background-color: #ffffff;
			border-radius: 2vw;
			display: flex;
		}
		.demo_tops{
			width: 100%;
			height: 10vw;
			display: flex;
		}
		.demos_zuo{
			width: 15vw;
			height: 100%;
			text-align: center;
			line-height: 10vw;
			font-size: 4vw;
		}
		.topse{
			width: 100%;
			height: 15vw;
			
			background-color: #ffffff;
			border-radius: 2vw;
			display: flex;
		}
		.tops_left{
			width: 90%;
			height: 100%;
		}
		.tops_right{
			width: 10%;
			height: 100%;
		}
		.touxiang{
			width: 8vw;
			height: 8vw;
			border-radius: 50%;
			background-color: black;
			margin-top: 3vw;
		}
		.top_right{
			width: 10%;
			height: 100%;
		}
		.kou{
			width: 90%;
			height: 90vw;
			margin-top: 5vw;
			background-color: #ffffff;
			border-radius: 5vw;
			overflow: scroll;
		}
</style>
